<template>
	<div class="personal">
		<header class="header" >
			<div class="layout w92 auto pt10 pb10">
				<i></i>
				<inform :img="img_url"></inform>
			</div>
			<div class="user flex-left layout" style="padding:10% 8%" v-if="logged">
				<img class="circle avatar mr25 " src="../../assets/avatar2.png" alt="">
				<button class="border radius white pt5 pb5 pl15 pr15" style="border-color:#fff;">点击登录</button>
			</div>
			<div class="user flex-left layout" style="padding:10% 8%" v-else @click.stop="jump">
				<img class="circle avatar mr25 " v-if="data.user_headimg" :src="data.user_headimg" alt="">
				<img class="circle avatar mr25 " v-else src="../../assets/avatar2.png" alt="">
				<div class="user-info">
					<p class="fs14 white">{{ data.username }}</p>
					<p class="fs12 white mt10 mb10">ID:{{ data.id }}</p>
					<strong class="fs12 subject bg-white pt5 pb5 pl15 pr15" style="border-radius:15px">{{ data.vip_name }}</strong>
				</div>
			</div>
		</header>
		<section class="order border-b20 pb20">
			<router-link tag="div" to="/personal/order" class="orde-title auto w92 layout">
				<h3 class="fs18 bold black">我的订单</h3>
				<div class="pt25 pb25">
					<span class="c68">查看全部订单</span>
					<van-icon class="black" color="#000" size="20px" name="youjiantou"/>
				</div>
			</router-link>
			<ul class="row">
				<li class="col s20 align-center pos-rel">
					<router-link :to="'/personal/order?status=0'">
						<img style="width:30px" src="../../assets/order-icon1.png" alt=""> 
						<i class="my-icon-number bg-subject white fs12 align-center pos-abs circle" v-if="data.dfk">{{ data.dfk }}</i>
						<p class="fs12 c333">待付款</p>
					</router-link>
				</li>
				<li class="col s20 align-center">
					<router-link :to="'/personal/order?status=1'">
						<img style="width:30px" src="../../assets/order-icon2.png" alt=""> 
						<i class="my-icon-number bg-subject white fs12 align-center pos-abs circle" v-if="data.dfh">{{ data.dfh }}</i>
						<p class="fs12 c333">待发货</p>
					</router-link>
				</li>
				<li class="col s20 align-center">
					<router-link :to="'/personal/order?status=2'">
						<img style="width:30px" src="../../assets/order-icon3.png" alt=""> 
						<i class="my-icon-number bg-subject white fs12 align-center pos-abs circle" v-if="data.yfh">{{ data.yfh }}</i>
						<p class="fs12 c333">已发货</p>
					</router-link>
				</li>
				<li class="col s20 align-center">
					<router-link :to="'/personal/order?status=3'">
						<img style="width:30px" src="../../assets/order-icon4.png" alt=""> 
						<i class="my-icon-number bg-subject white fs12 align-center pos-abs circle" v-if="data.ywc">{{ data.ywc }}</i>
						<p class="fs12 c333">已完成</p>
					</router-link>
				</li>
				<li class="col s20 align-center">
					<router-link to="/personal/order/after-sale">
						<img style="width:30px" src="../../assets/order-icon5.png" alt=""> 
						<i class="my-icon-number bg-subject white fs12 align-center pos-abs circle" v-if="data.dfk">{{ data.dfk }}</i>
						<p class="fs12 c333">售后</p>
					</router-link>
				</li>
			</ul>
		</section>
		
		<section class="border-b20">
			<ul class="row pt20 pb20 align-center">
				<router-link tag="li" to="/personal/coupon" class="col s4">
					<span class="subject fs26" v-if="logged">*</span>
					<span class="subject fs26" v-else>{{ data.coupon_count >= 10000?data.coupon_count/10000 + '万': data.coupon_count }}</span>
					<p class="c333 fs12">优惠券</p>
				</router-link>
				<router-link tag="li" to="/personal/coupon/integral" class="col s4 border-r border-l">
					<span class="subject fs26" v-if="logged">*</span>
					<span class="subject fs26" v-else>{{ data.point | numbers }}</span>
					<p class="c333 fs12">积分</p>
				</router-link>
				<router-link tag="li" to="/personal/coupon/bill" class="col s4">
					<span class="subject fs26" v-if="logged">*</span>
					<span class="subject fs26" v-else>{{ data.zd | numbers  }}</span>
					<p class="c333 fs12">账单</p>
				</router-link>
			</ul>
		</section>

		<section class="list">
			<ul class="row border-b pt20 pb20">
				<li class="col s3 align-center">
					<router-link to="/personal/collect">
						<img style="width:30px" src="../../assets/icon1.png" alt="">
						<p class="c333 fs12">我的收藏</p>
					</router-link>
				</li>
				<li class="col s3 align-center">
					<router-link to="/login/authentication">
						<img style="width:30px" src="../../assets/icon2.png" alt="">
						<p class="c333 fs12">资料认证</p>
					</router-link>
				</li>
				<li class="col s3 align-center">
					<router-link to="/personal/address">
						<img style="width:30px" src="../../assets/icon3.png" alt="">
						<p class="c333 fs12">收货地址</p>
					</router-link>
				</li>
				<li class="col s3 align-center">
					<router-link to="/personal/footprint">
						<img style="width:30px" src="../../assets/icon4.png" alt="">
						<p class="c333 fs12">我的足迹</p>
					</router-link>
				</li>
			</ul>
			<ul class="row pt20 pb20">
				<li class="col s3 align-center">
					<router-link to="/personal/interest">
						<img style="width:30px" src="../../assets/icon5.png" alt="">
						<p class="c333 fs12">我的兴趣</p>
					</router-link>
				</li>
				<li class="col s3 align-center">
					<router-link to="/personal/information/feedback">
						<img style="width:30px" src="../../assets/icon6.png" alt="">
						<p class="c333 fs12">意见反馈</p>
					</router-link>
				</li>
				<li class="col s3 align-center">
					<router-link to="/login/security">
						<img style="width:30px" src="../../assets/icon7.png" alt="">
						<p class="c333 fs12">安全中心</p>
					</router-link>
				</li>
				<li class="col s3 align-center">
					<router-link to="/personal/set">
						<img style="width:30px" src="../../assets/icon8.png" alt="">
						<p class="c333 fs12">设置</p>
					</router-link>
				</li>
			</ul>
		</section>

		<div class="full-width full-height pos-fix" style="z-index:10;top:0;"  @click="jumpLogin" v-if="logged"></div>
	</div>
</template>

<script>
import Inform from "@/components/Inform";
import { Icon } from 'vant';
	export default{
		components: {
			Inform,
		},
		filters: {
			numbers: (value) => {
				return value >= 10000 ? (value/10000).toFixed(2) + '万' : value
			}
		},
		data()
		{
			return{
				img_url 	: require('../../assets/icon-message2.png'),
				data    	: [],
				logged      : true,
			}
		},
		created()
		{
			if(window.localStorage.getItem('token')){
				this.logged = false;
				this.loadData();
			}
			else
				this.logged = true;
		},
		methods:
		{
			jumpLogin()
			{
				this.$router.push('/login')
			},
			jump()
			{
				this.$router.push('/personal/information')
			},
			loadData()
			{
				this.$http.get('/user/personal').then( res=> {
					this.data = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.personal{
		.header{
			height: 180px;
			background-image: url(../../assets/personal-bg.jpg);
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			.hint{
				background-color: white;
			}
		}
		.order{
			.my-icon-number{
			    width: 20px;
			    height: 20px;
			    line-height: 20px;
			    top: -1.5rem;
			    right: -1rem;
			}
		}
	}
</style>